<template>
    <div v-for="(select, label) in io_selects" :key="label"
        style="display: flex;align-items: center; margin-bottom: 10px">
        <el-tag :type='get_io_tag_type(label, select)' size="large">
            {{ label }}
        </el-tag>
        <el-select-v2 v-model="io_selects[label]" :options="pins" key="io_select">
            <template #label>
                <span>{{ select == -1 ? "未选择" : 'IO' + select }}</span>
            </template>
            <template #default="{ item }">
                <div v-if="item.value != -1" style="width:400px">
                    <el-tag :type="item.color" size="large" disable-transitions>
                        IO{{ item.value }}
                        <span v-if="item.label">:{{ item.label }}</span>
                        <span v-if='item.value == select'> (当前选择) </span>
                    </el-tag>

                    <el-tag v-for="data in item.selected" :key="item.value + data.label" :color="data.color"
                        disable-transitions size="large">
                        <span style="color: white;">{{ data.label }}</span>
                    </el-tag>
                </div>
            </template>
        </el-select-v2>
        <el-button type="danger" circle style="margin-left: 10px;" size='small' v-if="del" @click="del(label)">
            <el-icon-Close width="15px" />
        </el-button>
    </div>
    <el-row v-if="add" justify="center">
        <el-button type="primary" circle @click="emits('click', 1)">
            <el-icon-Plus width="20px" />
        </el-button>
    </el-row>
</template>
<script setup lang="ts">
import tools from "~/utils/tools";
import store from "~/utils/store";
const config = toRef(store)
const props = defineProps({
    label: String,
    max: Number,
    selected: Array,
    color: String,
    del: Function,
    add: {
        type: Boolean,
        default: false
    },
    io_config: Object || Array
})
const emits = defineEmits(['update:io_config', 'click'])
const io_selects = ref(props.io_config)
watchEffect(() => {
    for (let label in props.io_config?.value) {
        io_selects.value[label] = props.io_config?.value[label]
    }
    // console.log(io_selects)
})

const is_selected = computed(() => {
    let res = props.selected?.filter((v) => { if (v.label != props.label) return v })
    for (let index in io_selects.value) {
        if (io_selects.value[index] != -1)
            res?.push({ io: io_selects.value[index], label: props.label, color: tools.get_type_color(props.label) })
    }
    emits('update:io_config', io_selects.value) // 更新 io_config 到父组件
    return res;
})

const pins = computed(() => {
    const is_adc = props.label.toLowerCase().indexOf('adc') != -1
    let pins_arr = Array.from({ length: props.max }, (_, i) => { return { value: i, label: false, color: 'info', selected: [], disabled: false } })
    pins_arr.unshift({ value: -1, label: "未选择", color: 'info', selected: [], disabled: false })
    if (is_adc) {
        for (let index in pins_arr)
            pins_arr[index].disabled = true
        const adc_channles = tools.get_adc_channels(config.value.chip.cpu)
        for (let index in adc_channles) {
            const channel = adc_channles[index]
            const io = pins_arr[channel.io]
            if (io) {
                io.label = channel.label
                io.color = "info"
                io.disabled = false
            }
        }
    }
    for (let index in is_selected?.value) {
        const obj = is_selected?.value[index]
        const select_io = pins_arr[obj.io + 1]
        if (!select_io)
            continue;
        if (!select_io.selected.length || select_io.selected.filter(item => item.label == obj.label).length == 0) {
            select_io.selected.push({ label: obj.label, color: obj.color })
        }
        select_io.color = "info"
        if (select_io.selected.length == 1)
            select_io.color = "success"
        else if (select_io.selected.length > 1)
            select_io.color = "warning"
    }
    return pins_arr
});

const get_io_tag_type = (label: String | Number) => {
    const num = io_selects.value[label]
    const obj = pins.value[num + 1]
    if (!obj) {
        console.log(io_selects.value, label, io_selects.value[label], obj)
        return 'info';
    }
    if (obj.selected.length == 1)
        return "success"
    else if (obj.selected.length > 1) {
        if (label == "RST")
            return "warning"
        else
            return "danger"
    }
    return "info"
}
</script>
<style scoped>
.el-tag {
    margin-right: 10px;
    min-width: 60px;
    font-size: 1em;
}
</style>